<!-- 发货明细 -->
<template>
  <div class="container-ymm">
    <div class="header-ymm">
      <el-select v-model="search.delivery" placeholder="发货方式" class="seach-select" size="small">
        <el-option
          v-for="item in type_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="search.state" placeholder="发货状态" class="seach-select" size="small">
        <el-option
          v-for="item in status_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="search.warehouseId" placeholder="全部仓库" class="seach-select" size="small">
        <el-option>全部仓库</el-option>
        <el-option
          v-for="item in apart_options"
          :key="item.warehouseId"
          :label="item.warehouseName"
          :value="item.warehouseId"
        />
      </el-select>

      <el-date-picker
        v-model="dateTime"
        :picker-options="pickerOptions"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      />
      <el-input
        v-model="search.keyword"
        type="text"
        class="seach-input"
        size="small"
        placeholder="输入收货人、地址、SKU查询"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"/>
      </el-input>
      <input v-model="search.defect" type="checkbox" class="btn btn btn-primary checkbox">
      <span class="check-word">仅查询缺库存</span>
      <el-button class="greenbt" size="small" @click="getlist()">查询</el-button>
      <el-button
        v-show="checkPermission('delivery:send:authority')"
        class="greenbt"
        size="small"
        @click="sendFun()"
      >仓库发货</el-button>
      <el-button
        v-show="checkPermission('delivery:purchase:authority')"
        class="greenbt"
        size="small"
        @click="purchaseFun()"
      >转采购</el-button>
      <el-button
        v-show="checkPermission('delivery:exchange:authority')"
        class="greenbt"
        size="small"
        @click="exchangeFun()"
      >转仓</el-button>
      <el-button
        v-show="checkPermission('delivery:supplier:authority')"
        class="greenbt"
        size="small"
        @click="supplierFun()"
      >供应商代发</el-button>
      <el-button
        v-show="checkPermission('delivery:printing:authority')"
        class="greenbt"
        size="small"
        @click="printing()"
      >打印</el-button>
      <el-button
        v-show="checkPermission('delivery:download:authority')"
        class="greenbt"
        size="small"
        @click="download()"
      >导出</el-button>
      <el-button
        v-show="checkPermission('delivery:update:authority')"
        class="greenbt"
        size="small"
        @click="updateRecord()"
      >修改</el-button>
      <el-button
        v-show="checkPermission('delivery:cancel:authority')"
        class="greenbt"
        size="small"
        @click="cancelRecord()"
      >取消</el-button>
      <el-button
        v-show="checkPermission('delivery:returngoods:authority')"
        class="greenbt"
        size="small"
        @click="shipmentReturnGoods()"
      >退货</el-button>
    </div>
    <div class="table-ymm">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        height="450"
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"/>
        <el-table-column label="订单编号" width="260">
          <template slot-scope="scope">
            <span>{{ scope.row.orderNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="业务号" width="250">
          <template slot-scope="scope">
            <span>{{ scope.row.otherRemark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发货仓" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.warehouseName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SKU名称" width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.skuName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SKU编码" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.skuCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发货状态" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.state===1" style="color:#28A087">待发货</span>
            <span v-else-if="scope.row.state===2" style="color:#F05050">发货中</span>
            <span v-if="scope.row.state===3">已发货</span>
            <span v-if="scope.row.state===4">已取消</span>
          </template>
        </el-table-column>
        <el-table-column label="需发量" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="可用库存量" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.stockAmount===null">0</span>
            <span v-if="scope.row.stockAmount!==null">{{ scope.row.stockAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收货人" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.userName }}--{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收货地址" width="350">
          <template slot-scope="scope">
            <span>{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="已发量" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.outAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="供应商" width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.supplierName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="采购单" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.purchaseNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime |parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="付款时间" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.receivablesTime === null || scope.row.receivablesTime === ''"/>
            <span v-if="scope.row.receivablesTime !== null && scope.row.receivablesTime !== ''">{{ scope.row.receivablesTime |parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发货方式" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.delivery===1">供应商代发</span>
            <span v-else-if="scope.row.delivery===2">仓库自发</span>
          </template>
        </el-table-column>
        <el-table-column label="提货方式" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.deliveryMode=== '1'">自提</span>
            <span v-else-if="scope.row.deliveryMode==='2'">物流配送</span>
          </template>
        </el-table-column>
        <el-table-column label="采购状态" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.purchaseStatus==='B20'">待提交</span>
            <span v-else-if="scope.row.purchaseStatus==='B40'">待审批</span>
            <span v-if="scope.row.purchaseStatus==='B50'">采购中</span>
            <span v-if="scope.row.purchaseStatus==='D10'">已完成</span>
            <span v-if="scope.row.purchaseStatus==='D20'">已驳回</span>
          </template>
        </el-table-column>
        <el-table-column label="分类" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.classification===1">整机</span>
            <span v-else-if="scope.row.classification===2">工具</span>
            <span v-if="scope.row.classification===3">辅材</span>
            <span v-else-if="scope.row.classification===4">赠品</span>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="品类" min-width="80"/>
        <el-table-column prop="brandName" label="品牌" min-width="130"/>
        <el-table-column label="发货流水号" width="150">
          <template slot-scope="scope">
            <span
              style="color:#28A087"
              @click="historyShipment(scope.row.shipmentId)"
            >{{ scope.row.pipelineNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderRemark" label="用户备注" min-width="200"/>
      </el-table>
    </div>
    <div class="table-ymm-bt">
      <el-pagination
        :current-page="search.page"
        :page-sizes="[30,50,100,500,1000]"
        :page-size="search.pageSize"
        :pager-count="6"
        :total="search.total"
        background
        layout="sizes, prev, pager, next,total"
        @current-change="handleCurrentChange"
      />
    </div>
    <component
      :is="modal"
      :modal-data="modalData"
      :modal-static-data="{closeChildAndRefresh}"
      @close="closeChild"
    />
  </div>
</template>
<script>
import { get } from '@/api/utils'
import Send from './dialog/Send.vue'
import Purchase from './dialog/Purchase.vue'
import Exchange from './dialog/Exchange.vue'
import Supplier from './dialog/Supplier.vue'
import History from './dialog/History.vue'
import Update from './dialog/Update.vue'
import { getUserInfo } from '@/api/login'
import { getLodop } from '@/utils/LodopFuncs'
import { fetchList, download, queryList, updateReceivingGoods } from '@/api/pas/delivery'
export default {
  data() {
    return {
      modal: 1,
      modalData: {},
      type_options: [
        { value: '', label: '发货方式' },
        { value: '1', label: '供应商代发' },
        { value: '2', label: '仓库自发' }
      ],
      status_options: [
        { value: '', label: '发货状态' },
        { value: '0', label: '需发货' },
        { value: '1', label: '待发货' },
        { value: '2', label: '发货中' },
        { value: '3', label: '已发货' },
        { value: '4', label: '已取消' }
      ],
      apart_options: [],
      search: {
        delivery: '',
        state: '0',
        warehouseId: '',
        starTime: '',
        endTime: '',
        keyword: '',
        defect: '',
        time: null,
        pageNumber: 0,
        page: 1,
        pageSize: 30,
        total: 0
      },
      tableData: [],
      selectCount: '',
      shipmentId: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      dateTime: ['', ''],
      userid: null,
      imgUrl: require('../../assets/images/bsh.jpg')
    }
  },
  created() {
    this.getPermission()
  },
  mounted() {
    this.getlist()
    // 加载仓库
    queryList(this.search).then(response => {
      if (response.data.status === 'success') {
        this.apart_options = response.data.data.list
      }
    })
  },
  methods: {
    closeChildAndRefresh() {
      this.modal = null
      this.search.page = 1
      this.getlist()
      this.selectCount = 0
    },
    // 表格选择
    handleSelectionChange(rows) {
      this.shipmentId = rows[0].shipmentId
      this.selectCount = rows.length
      // 多条
      this.modalData = rows
    },
    closeChild() {
      this.modal = null
    },
    // 退货
    shipmentReturnGoods() {
      if (this.selectCount !== 1) {
        this.$message('请选择一条记录退货！')
        return
      }
      if (this.modalData[0].outAmount === 0 || this.modalData[0].outAmount === null || this.modalData[0].outAmount === '') {
        this.$message('未发货，不能退货！')
        return
      }
      this.$prompt('请输入退货数量', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /(^[1-9]\d*$)/,
        inputErrorMessage: '请输入正整数'
      }).then(({ value }) => {
        if (this.modalData[0].outAmount < value) {
          this.$message({ type: 'info', message: '退货量不能大于已发量！' })
          return
        }
        var data = { 'shipmentId': this.modalData[0].shipmentId, 'amount': value }
        get('/wxh-cloud-rest/rest/', '/pas/shipment/returnGoods', data)
          .then(response => {
            this.$message({
              type: 'info',
              message: response.data.messge
            })
            this.getlist()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    sendFun() {
      if (
        this.selectCount === 0 ||
        this.selectCount === null ||
        this.selectCount === ''
      ) {
        this.$message('请选择发货明细！')
        return
      }
      // 发货验证
      var list = this.modalData
      for (var i = 0; i < list.length; i++) {
        if (list[i].delivery !== 2) {
          this.$message('请选择仓库自发明细！')
          return
        } else if (
          list[i].stockAmount === null ||
          list[i].stockAmount === '' ||
          parseInt(list[i].stockAmount) === 0 ||
          parseInt(list[i].stockAmount) < 0
        ) {
          this.$message('库存不足不能发货！')
          return
        } else if (list[i].state === 3) {
          this.$message('有明细已完成不能发货！')
          return
        }
      }
      if (list.length > 1) {
        if (
          list[0].userName !== list[1].userName ||
          list[0].address !== list[1].address
        ) {
          this.$message('收货人不一致不能发货！')
          return
        }
      }
      this.modal = Send
    },
    supplierFun() {
      if (this.selectCount === 0 || this.selectCount === null || this.selectCount === '') {
        this.$message('请选择发货明细！')
        return
      }
      // 发货验证
      var list = this.modalData
      for (var i = 0; i < list.length; i++) {
        if (list[i].delivery !== 1) {
          this.$message('请选择供应商代发明细！')
          return
        } else if (list[i].state === 3) {
          this.$message('有明细已完成不能发货！')
          return
        } else if (
          list[i].purchaseStatus === null ||
          list[i].purchaseStatus === '' ||
          list[i].purchaseStatus !== 'B50'
        ) {
          this.$message('不是采购中状态不能发货！')
          return
        }
      }
      this.modal = Supplier
    },
    // 转采购
    purchaseFun() {
      if (this.selectCount === 0 || this.selectCount === null || this.selectCount === '') {
        this.$message('请选择明细转采购！')
        return
      }
      var list = this.modalData
      for (var i = 0; i < list.length; i++) {
        var num = list[i].amount
        if (list[i].outAmount !== null && list[i].outAmount !== '') {
          num = parseInt(list[i].amount) - parseInt(list[i].outAmount)
        }
        if (
          parseInt(num) < parseInt(list[i].stockAmount) ||
          parseInt(num) === parseInt(list[i].stockAmount)
        ) {
          this.$message('有库存不需要采购！')
          return
        } else if (list[i].state === 3) {
          this.$message('有明细已完成不能转采购！')
          return
        } else if (list[i].purchaseId !== null && list[i].purchaseId !== '') {
          this.$message('有明细已转过采购！')
          return
        }
        if (list[i].phone !== list[0].phone || list[i].address !== list[0].address) {
          this.$message('收货人、收货地址不一致，不能一起转采购！')
          return
        }
      }
      this.modal = Purchase
    },
    // 履历
    historyShipment(shipmentId) {
      this.modalData = { shipmentId: shipmentId }
      this.modal = History
    },
    exchangeFun() {
      if (this.selectCount !== 1) {
        this.$message('请选择一条记录转仓！')
        return
      }
      if (this.modalData[0].state !== 1) {
        this.$message('只有待发货才能转仓！')
        return
      }
      if (this.modalData[0].delivery === 1) {
        this.$message('供应商代发不允许转仓！')
        return
      }
      this.modalData = { type: this.shipmentId }
      this.modal = Exchange
    },
    updateRecord() {
      if (this.selectCount !== 1) {
        this.$message('请选择一条记录修改！')
        return
      }
      if (this.modalData[0].state !== 1) {
        this.$message('只有待发货才能修改！')
        return
      }
      this.modalData = this.modalData[0]
      this.modal = Update
    },
    cancelRecord() {
      if (this.selectCount === 0 || this.selectCount === '' || this.selectCount === null) {
        this.$message('请选择要取消的明细！')
        return
      }
      var shipmentIds = ''
      for (var index = 0; index < this.modalData.length; index++) {
        if (this.modalData[index].state !== 1) {
          this.$message('只有待发货才能取消！')
          return
        }
        shipmentIds += this.modalData[index].shipmentId + ','
      }
      this.$confirm('执行取消操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = {
          'shipmentIds': shipmentIds
        }
        updateReceivingGoods(param)
          .then(response => {
            if (response.data.status === 'success') {
              this.$message({
                message: response.data.messge
              })
            }
            this.handleClose()
          })
        this.getlist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已撤销操作'
        })
      })
    },
    // 分页
    handleCurrentChange(val) {
      this.search.page = val
      this.getlist()
    },
    getlist() {
      var vmthis = this
      if (
        this.dateTime !== null &&
        this.dateTime[0] !== '' &&
        this.dateTime[0] !== null
      ) {
        this.search.starTime = this.dateTimeStr(this.dateTime[0])
        this.search.endTime = this.dateTimeStr(this.dateTime[1])
      } else {
        this.search.starTime = ''
        this.search.endTime = ''
      }
      this.search.pageNumber = (this.search.page - 1) * this.search.pageSize
      fetchList(this.search)
        .then(response => {
          if (response.data.status === 'success') {
            vmthis.search.total = response.data.data.total
            vmthis.tableData = response.data.data.list
          }
        })
        .catch(error => {
          console.log(error)
        })
    },

    dateTimeStr(datetime) {
      var now = datetime
      var yy = now.getFullYear() // 年
      var mm = now.getMonth() + 1 // 月
      var dd = now.getDate() // 日
      var hh = now.getHours() // 时
      var ii = now.getMinutes() // 分
      var ss = now.getSeconds() // 秒
      var clock = yy + '-'
      if (mm < 10) clock += '0'
      clock += mm + '-'
      if (dd < 10) clock += '0'
      clock += dd + ' '
      if (hh < 10) clock += '0'
      clock += hh + ':'
      if (ii < 10) clock += '0'
      clock += ii + ':'
      if (ss < 10) clock += '0'
      clock += ss
      return clock
    },

    download: function() {
      download(this.search)
        .then(response => {
          const date = new Date()
          const filefix =
            date.getFullYear() +
            '-' +
            parseInt(date.getMonth() + 1) +
            '-' +
            date.getDate() +
            ' ' +
            date.getHours() +
            ':' +
            date.getMinutes() +
            ':' +
            date.getSeconds()
          const blob = new Blob([response.data], {
            type: 'text/csvchartset=utf-8' // 将会被放入到blob中的数组内容的MIME类型
          }) // 创建一个blob对象
          const a = document.createElement('a') // 创建一个<a></a>标签
          a.href = URL.createObjectURL(blob) // response is a blob
          a.download = filefix + '发货明细.csv' // 文件名称
          a.style.display = 'none'
          document.body.appendChild(a)
          a.click()
          a.remove()
          return response
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 权限
    getPermission() {
      var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=') // 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'token') {
          this.userid = arr2[1]
        } else {
          this.userid = 1
        }
      }
      if (localStorage.getItem(this.userid)) {
        return
      }

      getUserInfo()
        .then(response => {
          if (response.data.status === 'ok') {
            localStorage.setItem(
              this.userid,
              JSON.stringify(response.data.data.permissions)
            )
          }
        })
        .catch(error => {
          console.log(error)
        })
    },

    checkPermission(value) {
      if (value) {
        if (
          localStorage.getItem(this.userid) &&
          localStorage.getItem(this.userid).indexOf(value) >= 0
        ) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    // 打印
    printing() {
      for (var index = 0; index < this.modalData.length; index++) {
        if (this.modalData[0].orderNumber !== this.modalData[index].orderNumber) {
          this.$message({
            message: '请选择同一销售单进行打印',
            type: 'warning'
          })
          return
        }
      }
      const LODOP = getLodop()
      LODOP.PRINT_INIT('单据打印')
      LODOP.SET_PRINT_PAGESIZE(1, 2300, 3350, '发货单') // 设置整页纸大小
      LODOP.SET_PRINT_MODE('PROGRAM_CONTENT_BYVAR', true)

      LODOP.ADD_PRINT_TEXT(30, 211, 416, 39, '发货单')
      LODOP.SET_PRINT_STYLEA(0, 'Horient', 1)
      LODOP.SET_PRINT_STYLEA(0, 'FontName', '宋体')
      LODOP.SET_PRINT_STYLEA(0, 'FontSize', 15)
      LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
      LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
      // bsh图片
      LODOP.ADD_PRINT_IMAGE(30, 30, 150, 100, '<img src=' + this.imgUrl + '/>')
      LODOP.SET_SHOW_MODE('BKIMG_IN_PREVIEW', 1) // 预览包含背景图
      LODOP.SET_SHOW_MODE('BKIMG_PRINT', 1) // 打印包含背景图

      LODOP.ADD_PRINT_TEXTA(
        'bshTelephone',
        76,
        27,
        200,
        20,
        '销售订单号: ' + this.modalData[0].orderNumber
      )
      LODOP.ADD_PRINT_TEXTA(
        'bshContacts',
        76,
        460,
        178,
        20,
        '收货人: ' + this.modalData[0].userName
      )
      var d = new Date(this.modalData[0].createTimeOrder) // 根据时间戳生成的时间对象
      var date =
        d.getFullYear() +
        '-' +
        (d.getMonth() + 1) +
        '-' +
        d.getDate() +
        ' ' +
        d.getHours() +
        ':' +
        d.getMinutes() +
        ':' +
        d.getSeconds()
      LODOP.ADD_PRINT_TEXTA('disName', 106, 27, 305, 50, '付款时间： ' + date)
      LODOP.ADD_PRINT_TEXTA(
        'disContactPhone',
        106,
        450,
        178,
        20,
        '客户电话: ' + this.modalData[0].phone
      )
      LODOP.ADD_PRINT_TEXTA(
        'disContactPhone',
        136,
        27,
        608,
        20,
        '送货地址: ' + this.modalData[0].address
      )

      LODOP.ADD_PRINT_LINE(156, 25, 156, 744, 0, 1)
      LODOP.ADD_PRINT_LINE(176, 25, 176, 744, 0, 1)

      LODOP.ADD_PRINT_TEXT(160, 27, 67, 20, '序号')
      LODOP.SET_PRINT_STYLEA(0, 'FontName', '宋体')
      LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
      LODOP.ADD_PRINT_TEXT(160, 100, 87, 20, 'SKU')
      LODOP.SET_PRINT_STYLEA(0, 'FontName', '宋体')
      LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
      LODOP.ADD_PRINT_TEXT(160, 256, 85, 20, 'SKU名称')
      LODOP.SET_PRINT_STYLEA(0, 'FontName', '宋体')
      LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
      LODOP.ADD_PRINT_TEXT(160, 590, 60, 20, '单位')
      LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
      LODOP.ADD_PRINT_TEXT(160, 680, 60, 25, '数量')
      LODOP.SET_PRINT_STYLEA(0, 'FontName', '宋体')
      LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)

      /* 列表Value*/
      var lineTop = 309
      var totalAmount = 0
      for (var i = 0; i < this.modalData.length; i++) {
        var accessoryTop = 20 * i + 180
        LODOP.ADD_PRINT_TEXT(accessoryTop, 35, 67, 20, i + 1)
        LODOP.ADD_PRINT_TEXTA(
          'skuCode',
          accessoryTop,
          62,
          200,
          20,
          this.modalData[i].skuCode
        )
        LODOP.ADD_PRINT_TEXTA(
          'skuName',
          accessoryTop,
          175,
          400,
          20,
          this.modalData[i].skuName
        )
        LODOP.ADD_PRINT_TEXTA(
          'classification',
          accessoryTop,
          600,
          49,
          20,
          this.modalData[i].unit
        )
        LODOP.ADD_PRINT_TEXTA(
          'outAmount',
          accessoryTop,
          680,
          90,
          80,
          this.modalData[i].amount
        )
        // line
        lineTop = 20 * i + 193
        LODOP.ADD_PRINT_LINE(lineTop - 37, 25, lineTop, 25, 0, 1)
        LODOP.ADD_PRINT_LINE(lineTop - 37, 55, lineTop, 55, 0, 1)
        ;``
        LODOP.ADD_PRINT_LINE(lineTop - 37, 170, lineTop, 170, 0, 1)
        LODOP.ADD_PRINT_LINE(lineTop - 37, 570, lineTop, 570, 0, 1)

        LODOP.ADD_PRINT_LINE(lineTop - 37, 651, lineTop, 651, 0, 1)
        LODOP.ADD_PRINT_LINE(lineTop - 37, 744, lineTop, 744, 0, 1)
        LODOP.ADD_PRINT_LINE(lineTop, 25, lineTop, 744, 0, 1)
        totalAmount = totalAmount * 1 + this.modalData[i].amount * 1
      }

      LODOP.ADD_PRINT_LINE(lineTop + 22, 25, lineTop + 22, 744, 0, 1)

      LODOP.ADD_PRINT_LINE(lineTop + 22, 25, lineTop, 25, 0, 1)
      LODOP.ADD_PRINT_LINE(lineTop + 22, 744, lineTop, 744, 0, 1)
      LODOP.ADD_PRINT_TEXT(lineTop + 5, 300, lineTop, 20, '合计')
      LODOP.ADD_PRINT_LINE(lineTop + 22, 651, lineTop, 651, 0, 1)
      LODOP.ADD_PRINT_TEXT(lineTop + 5, 681, lineTop, 681, totalAmount)

      LODOP.ADD_PRINT_LINE(lineTop + 76, 25, lineTop + 76, 744, 0, 1)
      LODOP.ADD_PRINT_LINE(lineTop + 110, 25, lineTop, 25, 0, 1)
      LODOP.ADD_PRINT_LINE(lineTop + 110, 744, lineTop, 744, 0, 1)
      LODOP.ADD_PRINT_TEXT(
        lineTop + 30,
        27,
        600,
        20,
        '请认真核对产品的包装、型号及数量信息，确认无误后签收，如有破损及数量不符请拒收或在线联系商城客服'
      )
      LODOP.ADD_PRINT_TEXT(
        lineTop + 45,
        27,
        600,
        20,
        '签收即表明您已完整收到此发货单上所列商品'
      )
      LODOP.ADD_PRINT_TEXT(
        lineTop + 60,
        27,
        600,
        20,
        '一式二份，客户存档和发货仓库存档'
      )

      LODOP.ADD_PRINT_LINE(lineTop + 110, 25, lineTop + 110, 744, 0, 1)
      LODOP.ADD_PRINT_TEXT(lineTop + 90, 27, 100, 20, '收货人签字：')
      LODOP.ADD_PRINT_TEXT(lineTop + 90, 310, 100, 20, '收货单位盖章：')
      LODOP.ADD_PRINT_TEXT(lineTop + 90, 560, 100, 20, '收货日期：')

      LODOP.PREVIEW()
    }
  }
}
</script>
<style>
   body{
     background-color: #ffffff;
   }
    /*表格头部颜色*/
  .el-table__header thead  tr th{
      background-color: #edf4f9;
  }
  /*表格字体*/
  .el-table tr {
      font-size: 12px;
  }
  /*表格行高*/
  .el-table .cell{
    line-height: 1.2;
  }
  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
     background-color: #D7FFD7 !important;
    /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #D7FFD7;
    /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
  }

</style>
